<template>
  <a-layout-header class="layout-header light-shadow">
    <a-row type="flex" justify="space-between">
      <a-col>
        <router-link to="/"> LOGO </router-link>
        <router-link to="/dashboard">控制台</router-link>
      </a-col>
      <a-col>
        <ul>
          <li>
            <router-link to="/">账户信息</router-link>
          </li>
          <li>
            <a-badge :count="4" dot>
              <router-link to="/">消息</router-link>
            </a-badge>
          </li>
          <li>
            <a-dropdown>
              <!-- :trigger="['click']"-->
              <a-avatar :size="36" :style="{ cursor: 'pointer' }" :src="showImg(user.avator)">
                <template v-slot:icon v-if="!user.avator">{{user.nickName[0]}}</template>
              </a-avatar>
              <template v-slot:overlay>
                <a-menu @click="handleOnClick2HeaderUI">
                  <a-menu-item key="0"> <UserOutlined />用户信息 </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="1">
                    <LogoutOutlined />退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </li>
        </ul>
      </a-col>
    </a-row>
  </a-layout-header>
</template>

<script>
import {
  Layout,
  Row,
  Col,
  Avatar,
  Dropdown,
  Badge,
  Menu,
} from "ant-design-vue";
import { PieChartOutlined, LogoutOutlined, UserOutlined } from "@ant-design/icons-vue";

import {getInfo} from 'api/common/header';
import {mapState} from 'vuex'

import { showImg } from 'utils/Util'

export default {
  name: "UIHeader",
  components: {
    ALayoutHeader: Layout.Header,
    // header
    ARow: Row,
    ACol: Col,
    AAvatar: Avatar,
    ADropdown: Dropdown,
    ABadge: Badge,

    AMenu: Menu,
    AMenuItem: Menu.Item,
    AMenuDivider: Menu.Divider,
    // ICON
    LogoutOutlined,
    PieChartOutlined,
    UserOutlined,
  },
  data () {
    return {
      user: {
        nickName: "U"
      }
    }
  },
  computed: {
    ...mapState(["loginUrl"])
  },
  methods: {
    handleOnClick2HeaderUI(item) {
      switch(item.key) {
        case "0":
          console.info("登录账户信息");
          break;
        case "1":
          this.logout();
          break;
      }
    },
    getUserInfo() {
      getInfo()
        .then(res => {
          if(res) {
            this.user = res;
          }
        })
    },
    showImg(key) {
      return showImg(key)
    },
    logout() {
      // 跳转出去
      this.$router.replace(this.loginUrl || "/loginUrl");
    }
  },
  created () {
    this.getUserInfo();
  }
};
</script>

<style lang="less" scoped>
@import "~assets/theme/basic/basic.less";

.layout-header {
  z-index: 10;
  height: @header-height;
  line-height: @header-height;
  padding: 0 25px;

  ul {
    list-style-type: none;

    li {
      display: inline;
      margin-left: 24px;
    }
  }
}
</style>